 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>交互式的图片对比控件</title>
</head>
<style>
	/*css resize 方案*/
	.image-slider {
		position: relative;
		display: inline-block;
	}
	.image-slider > div {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 50%;
		overflow: hidden;
		resize: horizontal;
		max-width: 100%;
	}
	.image-slider > div::before {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 12px;
		height: 12px;
		cursor: ew-resize;
		padding: 5px;
		background: linear-gradient(-45deg, white 50%, transparent 0);
		background-clip: content-box;
	}
	.image-slider img {
		display: block;
		user-select: none;
	}
	/*范围输入控件方案*/
	.image-slider1 {
		position: relative;
		display: inline-block;
	}
	.image-slider1 > div {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 50%;
		overflow: hidden;
	}
	.image-slider1 img {
		display: block;
		user-select: none;
	}
	.image-slider1 input {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0;
		filter: contrast(.5);
		mix-blend-mode: luminosity;
		width: 50%;
		transform: scale(2);
		transform-origin: left bottom;
	}
</style>
<body>
	<!-- css resize方案 -->
	<div class="image-slider">
		<div>
			<img src="../../img/timg.jpeg" alt="before"/>
		</div>
		<img src="../../img/timg1.jpeg" alt="after" />
	</div>
	<!-- 范围输入控件方案 -->
	<div id="image-slider1" class="image-slider1">
		<img src="../../img/timg.jpeg" alt="before" />
		<img src="../../img/timg1.jpeg" alt="after" />
	</div>
</body>
<script type="text/javascript">
	var $slider = document.getElementById('image-slider1');
	var div = document.createElement('div');
	var img = $slider.querySelector('img');
	$slider.insertBefore(div, img);
	div.appendChild(img);
	// 创建滑块
	var range = document.createElement('input');
	range.type = 'range';
	range.oninput = function() {
		div.style.width = this.value + '%';
	}
	$slider.appendChild(range);
</script>
</html>